<template>
   <div>
      <!-- template模板必须只能包含一个根节点 -->
      <!-- vue的指令必须要使用在template模板中 -->
      <!-- 
        vue中通过三种方式来实现内容渲染
        1、通过v-text指令方式来实现文本内容渲染的,但是会覆盖之前标签之间的内容
        2、通过v-html指令方式实现HTML内容渲染,但是会覆盖之前标签之间的内容
        3、插值表达式:在vue中专业术语称为mustache
         1）语法：{{}}
         2）位置：在标签之间，不会覆盖标签之前的内容，可以插入到合适的位置
         3）内容
           - 变量
           - 常量
           - 表达式：算数运算表达式、三元表达式、比较运算表达式
           - 函数
       -->
       <h1 v-text="title">个人介绍</h1>
       <table>
            <tr>
                <td>姓名:</td>
                <td v-html="name">翟吉喆</td>
            </tr>
            <tr>
                <td>教学理念:</td>
                <td>翟老师的教育理念是:{{keyword}}</td>
            </tr>
            <tr>
                <td>虚岁:</td>
                <td>{{age+1}}岁</td>
            </tr>
            <tr>
                <td>是否成年:</td>
                <td>{{age>=18?'成年':'未成年'}}</td>
            </tr>
            <tr>
                <td>名人格言:</td>
                <td>{{desc.split("").reverse().join("")}}</td>
            </tr>
            <tr>
                <td>生日:</td>
                <td>{{idcard.slice(6,10)+"-"+idcard.slice(10,12)+"-"+idcard.slice(12,14)}}</td>
            </tr>
       </table>
   </div>
</template>

<script>
export default {
    data(){
        return{
           title:'人物介绍',
           name:'<strong><em><a href="http://www.zhaijizhe.cn">Giles</a></em></strong>',
           keyword:'授人以鱼,不如授人以渔',
           age:38,
           desc:'白日依山尽，黄河入海流',
           idcard:'610122198404084037'
        }
    }
}
</script>

<style lang="scss">

</style>